<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <button id="btn">click</button>
</div>
<script>
    function observe(obj) {
        if (typeof obj === 'object' && typeof obj != null) {
            for(const key in obj) {
                reactive(obj, key, obj[key])
            }
        } else {
            return obj
        }
    }

    function reactive(obj, key, val) {

        observe(val)

        Object.defineProperty(obj, key, {
            configurable: true,
            enumerable: true,
            set(v) {
                console.log('触发set', key, val, this);
                if (val !== v) {
                    val = v;
                }
            },
            get() {
                console.log('触发get', key, val);
                return val;
            }
        })
    }

    var obj = {
        obj1: {
            obj2: {
                name: 'apple'
            }
        }
    }

    observe(obj)

    btn.addEventListener('click', function () {
        console.log('obj', JSON.stringify(obj))
    })

</script>
</body>
</html>